<template>
  <div class="img-card">
    <template v-if="lists.length">
      <transition-group v-if="types === 'IMAGE' || types === 'VIDEO'" name="flip-list" class="list" tag="div">
        <section class="card-one"
                v-for="item of lists"
                :key="item.id">
          <div class="one-img" :style="item.outerLink ? {backgroundImage: `url('${getWxImg(item.outerLink.split('?') && item.outerLink.split('?')[0])}')`} : ''"></div>
          <div class="one-info">
            <div class="one-text">{{item.materialName}}</div>
            <div class="one-msg">
              <div>更新时间：{{item.updateTime}}</div>
              <div>
                <span title="删除" class="iconfont" @click="handleDelete(item.id)">&#xe63a;</span>
              </div>
            </div>
          </div>
        </section>
      </transition-group>
      <transition-group v-if="types === 'NEWS'" name="flip-list" class="list" tag="div">
        <section class="card-two"
                v-for="item of lists"
                :key="item.id">
          <div class="two-img" :style="{backgroundImage: `url('${getWxImg(item.materials && item.materials[0].imagePath)}')`}">
            <div class="multi-type" v-if="item.materials && item.materials.length > 1">多图文</div>
          </div>
          <div class="two-text two-text-one">{{item.materials && item.materials[0].title}}</div>
          <div class="two-text two-text-two">{{item.materials && item.materials[0].descript}}</div>
          <div class="two-msg">
            <div>更新时间：{{item.materials && item.materials[0].updateTime}}</div>
            <div style="display: flex;align-items: center">
              <span title="查看" @click="previewArtical(item.materials, types)" class="iconfont" style="display: inline-block; margin-right: 10px;font-size:12px;">&#xe648;</span>
              <span title="删除" class="iconfont" @click="handleDelete(item.id)">&#xe63a;</span>
            </div>
          </div>
        </section>
      </transition-group>
      <transition-group v-if="types === 'VOICE'" name="flip-list" class="list" tag="div">
        <section class="card-radio"
                v-for="item of lists"
                :key="item.id">
          <div class="radio-card" :style="{backgroundImage: `url('${getWxImg(item.outerLink)}')`}"></div>
          <div class="two-text two-text-one">{{item.materialName}}</div>
          <div class="two-msg">
            <div>更新时间：{{item.updateTime}}</div>
            <div>
              <span title="删除" class="iconfont" @click="handleDelete(item.id)">&#xe63a;</span>
            </div>
          </div>
        </section>
      </transition-group>
      <transition-group v-if="types === 'TEXT'" name="flip-list" class="list text" tag="div">
        <section class="card-two"
                v-for="item of lists"
                :key="item.id">
            <div class="two-text TextTitle">{{item.materialName || ''}}</div>
          <div class="textBox">
            <div class="two-text two-text-one TextContent">{{item.content}}</div>
            <div class="two-text two-text-two">{{item.descript}}</div>
          </div>
          <div class="two-msg">
            <div>更新时间：{{item.updateTime}}</div>
            <div style="display: flex;align-items: center">
              <span title="查看" @click="previewArtical(item,types)" class="iconfont" style="display: inline-block; margin-right: 10px;font-size:12px;">&#xe648;</span>
              <span title="删除" class="iconfont" @click="handleDelete(item.id)">&#xe63a;</span>
            </div>
          </div>
        </section>
      </transition-group>
    </template>
    <div v-else class="default-cont">暂无数据</div>
    <el-dialog
      title="图文预览"
      width="30%"
      :visible.sync="innerVisible">
      <section>
        <div v-for="item of innerVisibleData" :key="item.id">
          <div class="inner-title">{{item.title || ''}}</div>
          <!-- <div class="inner-desc">{{item.descript || ''}}</div> -->
          <!-- <div class="inner-img" :style="{backgroundImage: 'url(' + getWxImg(item.imagePath) + ')'}"></div> -->
          <div class="blog-content" v-html="handlerContent(item.content)"></div>
        </div>
      </section>
    </el-dialog>
    <el-dialog
      title="文字预览"
      width="30%"
      :visible.sync="textInnerVisible">
      <section>
          <div class="inner-title">{{textInnerVisibleData.materialName || ''}}</div>
          <div class="inner-desc" style="margin-bottom: 30px">{{textInnerVisibleData.descript || ''}}</div>
          <!-- <div class="inner-img" :style="{backgroundImage: 'url(' + getWxImg(textInnerVisibleData.imagePath) + ')'}"></div> -->
          <div class="blog-content" style="font-size: 18px" v-html="textInnerVisibleData.content"></div>
      </section>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    types: String,
    list: Array
  },
  data () {
    return {
      lists: [],
      // 图文预览
      innerVisible: false,
      textInnerVisible: false,
      innerVisibleData: [],
      textInnerVisibleData: {},
      weixinimgindex: 0
    }
  },
  watch: {
    list (val) {
      this.lists = val
      // this.weixinimgindex = 0
      // val.forEach(ele => {
      //   if (ele.img) {
      //     this.loadweixinimg(ele.img)
      //   }
      // })
    }
  },
  methods: {
    handlerContent (content) {
      content = content.replace(/(http|https):\/\/mmbiz\.qpic\.cn\//g, `${document.location.protocol}//test.saas.yuemia.com/`)
      return content
    },
    // 图文预览
    previewArtical (val, type) {
      if (type === 'NEWS') {
        this.innerVisibleData = []
        val.forEach(ele => {
          if (ele.content) {
            ele.content = ele.content.replace(/data-src/g, 'src')
          }
        })
        this.innerVisibleData = val
        this.innerVisible = true
      }
      if (type === 'TEXT') {
        this.textInnerVisibleData = {}
        this.textInnerVisible = true
        this.textInnerVisibleData = val
      }
    },
    handleDelete (id) {
      this.$emit('delete', id)
    },
    shuffle () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      let arr = this.lists
      let i = arr.length
      while (i) {
        let j = Math.floor(Math.random() * i--);
        [arr[j], arr[i]] = [arr[i], arr[j]]
      }
      this.lists = []
      this.lists = arr
      this.timer = setTimeout(this.shuffle, 5000)
    }
  },
  created () {
    // this.shuffle()
  }
}
</script>
<style lang="stylus">
.blog-content
  *
    max-width 100%
  img
    vertical-align middle
    max-width 100% !important
    // width 100% !important
    height auto !important
</style>
<style lang="stylus" scoped>
  .img-card
    .list
      width 100%
      // height 100%
      display flex
      flex-wrap wrap
      padding 5px 0 0 10px
      box-sizing border-box
    .default-cont
      width 100%
      height 120px
      text-align center
      line-height 20px
      padding 50px 0
      box-sizing border-box
      font-size 12px
      color #909399
    .list.text
      color red
    .flip-list-enter, .flip-list-leave-to
      opacity 0
    .flip-list-leave-active
      position absolute
    .card-one
      columnTop()
      margin 10px 24px 14px 10px
      width 280px
      height 230px
      transition all .5s
      background-color #fff
      .one-img
        width 100%
        height 160px
        bgI()
        background-image url('http://saas.medchat.yuemia.com/static/BG.png')
        box-shadow 0px 1px 6px rgba(0, 0, 0, 0.1)
        transition all ease .2s
        &:hover
          box-shadow 0px 1px 6px rgba(0, 0, 0, 0.3)
          transform scale(1.05)
        .one-label
          width 64px
          height 26px
          line-height 26px
          background-color #3496FF
          font-size 12px
          color #ffffff
          text-align center
          box-shadow 0px 1px 4px rgba(68, 158, 254, 0.5)
      .one-info
        flex 1
        width 100%
        .one-text
          margin 10px 0 12px
          no-wrap()
        .one-msg
          between()
          align-items center
          color #7F7F7F
          font-size 12px
    .card-two
      columnTop()
      padded_box(border-box, 7px 8px 0)
      margin 10px 24px 14px 10px
      width 268px
      height 240px
      transition all .2s
      background-color #fff
      box-shadow 0px 1px 6px rgba(0, 0, 0, 0.1)
      &:hover
        box-shadow 0px 1px 6px rgba(0, 0, 0, 0.3)
        transform scale(1.03)
      // .two-img.title
      .two-img
        position relative
        width 100%
        height 140px
        bgI()
        background-size contain
        .multi-type
          position absolute
          left 8px
          bottom 6px
          padding 1px 2px
          width 36px
          line-height 18px
          text-align center
          border-radius 2px
          background-color rgba(0, 0, 0, 0.5)
          color #fff
          font-size 12px
    .textBox
      padding-top 23px
      padding-left 10px
      padding-right 10px
      box-sizing border-box
      width 100%
      height 100px
    .TextTitle
      line-height 60px
      text-align center
      width 229px!important
      font-size 21px
    .TextContent
      width 247px!important
      color #000
      font-size 18px
      margin-bottom 10px
    .two-text
      width 100%
      no-wrap()
    .two-text-one
      margin 10px 0 4px
    .two-text-two,.two-msg
      font-size 12px
      color #7F7F7F
    .two-text-two
      margin-bottom 12px
    .two-msg
      width 100%
      between()
      align-items center
    .card-radio
      margin 6px
      padded_box(border-box, 15px 15px 0)
      width 290px
      height 140px
      background-color #F7F7F7
      .radio-card
        margin-bottom 16px
        width 174px
        height 46px
        background-color #fff
        border-radius 6px
        box-shadow 0px 2px 10px rgba(0, 0, 0, 0.1)
        bgI()
        background-size cover
        background-image url('http://saas.medchat.yuemia.com/static/BG.png')
      &:hover
        box-shadow 0px 1px 6px rgba(0, 0, 0, 0.1)
    .iconfont
      cursor pointer
      &:hover
        color #3496FF
  .inner-title
    margin-bottom 20px
    font-size 30px
    line-height 40px
  .inner-desc
    line-height 20px
  .inner-img
    display block
    width 100%
    min-height 200px
    bgI()
</style>
